<template>
	<view :class="showAll?'juqing-wrap-unfold':'juqing-wrap'">
		<view class="title">
			剧情
		</view>
		<view :class="showAll?'content-unfold':'content'">
			{{content}}
		</view>
		<view class="bottom-wrap">
			<view class="arrow">
				<u-icon v-if="showAll" name="arrow-up" @click="fold"></u-icon>
				<u-icon v-else name="arrow-down" @click="unfold"></u-icon>
			</view>
			by: {{author}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			content: {
				type: String,
				default: "央视网消息（新闻联播）：第十三届全国人民代表大会第五次会议5日上午在北京人民大会堂开幕。近3000名全国人大代表肩负人民重托出席大会，认真履行宪法和法律赋予的神圣职责。，认真履行宪法和法律赋予的神圣职责。"
			},
			author: {
				type: String,
				default: "Tm"
			}
		},
		data() {
			return {
				showAll:false,
			}
		},
		methods:{
			unfold(){
				this.showAll=true;
			},
			fold(){
				this.showAll=false
			}
		}
	}
</script>

<style scoped>
	.juqing-wrap {
		width: 95%;
		height: 300upx;
		margin: auto;
		background-color: #FFF4F8;
	}

	.juqing-wrap-unfold {
		width: 95%;
		height: 500upx;
		margin: auto;
		background-color: #FFF4F8;
	}
	
	.title {
		font-size: 40upx;
		padding: 10upx;
	}

	.content {
		padding: 7upx;
		height: 160upx;
		overflow: hidden;
	}

	.content-unfold {
		padding: 7upx;
		height: 360upx;
		overflow: hidden;
	}
	
	.bottom-wrap {
		display: flex;
		justify-content: space-between;
	}

	.arrow {
		margin: auto;
		text-align: center;
	}
</style>
